<template>
  <div class="app-container flex column">
    <top-title :content="content" :updateTime="true"></top-title>
    <div class="tree-from-wrap f1 flex" style="height: 100%">
      <div class="left-tree f1 flex column">
        <!-- 按钮 -->
        <div class="btn-group flex">
          <div v-has="'office:add'" class="btn-common" @click="handleAdd()">添加下级</div>
          <!-- <div class="btn-common">批量删除</div> -->
        </div>

        <!-- 提醒 -->
        <div class="alter flex align-center">
          <img alt="" src="@/assets/imgs/alter_icon.png" />
          <span>当前选择:</span>
          <span v-if="currSelected.id">{{ currSelected.policeAgencyName }}</span>
          <span v-if="currSelected.id" @click="onClearSelected">取消选择</span>
        </div>

        <div class="search-group" style="padding: 0 0.1rem 0 0.2rem">
          <div class="input-wrap" style="width: 100%">
            <div class="input-item" style="padding: 0; width: 100%">
              <a-input v-model="value" :maxLength="15" placeholder="请输入区域名称" @pressEnter="onSearch">
                <a-icon slot="prefix" class="search-icon" type="search" />
                <a-button slot="suffix" class="searchBtn" style="margin-right: 0" type="primary" @click="onSearch"
                  >搜索</a-button
                >
              </a-input>
            </div>
          </div>
        </div>

        <div class="tree-wrap f1" style="height: 100%; padding: 0 0.2rem; overflow: scroll">
          <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
            <!-- <span style="user-select: none">
              <div class="tree-x" id="treeList" style="height: 100%; overflow: scroll"></div>
            </span> -->
            <a-tree
              :autoExpandParent="autoExpandParent"
              :checkStrictly="checkStrictly"
              :checkedKeys="checkedKeys"
              :expandedKeys="iExpandedKeys"
              :loading="loading"
              :replace-fields="replaceFields"
              :selectedKeys="selectedKeys"
              :treeData="departTree"
              checkable
              multiple
              @check="onCheck"
              @expand="onExpand"
              @rightClick="rightHandle"
              @select="onSelect"
            >
              <a-icon slot="switcherIcon" type="down" />
              <template #title="{ policeAgencyName }">
                <span v-if="policeAgencyName.indexOf(value) > -1">
                  {{ policeAgencyName.substr(0, policeAgencyName.indexOf(value)) }}
                  <span style="color: #ecf0f1; background: #74b9ff">{{ value }}</span>
                  {{ policeAgencyName.substr(policeAgencyName.indexOf(value) + value.length) }}
                </span>
                <span v-else>{{ policeAgencyName }}</span>
              </template>
            </a-tree>
            <!--新增右键点击事件,和增加添加和删除功能-->
            <a-menu slot="overlay" v-has="'office:add'">
              <a-menu-item key="1" v-has="'office:add'" @click="handleAdd(2)">添加</a-menu-item>
              <a-menu-item key="2" v-has="'office:delete'" @click="handleDelete">删除</a-menu-item>
              <a-menu-item key="3" @click="closeDrop">取消</a-menu-item>
            </a-menu>
          </a-dropdown>

          <div class="drawer-bootom-button">
            <a-dropdown :trigger="['click']" placement="topCenter">
              <a-menu slot="overlay" class="much">
                <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
                <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
                <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
                <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
                <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
                <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
              </a-menu>
              <a-button class="searchBtn"> 树操作 <a-icon type="up" /> </a-button>
            </a-dropdown>
          </div>
        </div>
      </div>
      <div class="right-form f1">
        <a-card v-if="selectedKeys.length > 0" :bordered="false" class="right-form-wrapper">
          <a-form-model ref="form" :model="form" :rules="rules" autocomplete="off" class="formStyle" layout="inline">
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="机关名称" prop="policeAgencyName">
                  <a-input v-model="form.policeAgencyName" placeholder="请输入机关名称" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="上级机关" prop="parentPoliceAgencyName">
                  <a-input v-model="form.parentPoliceAgencyName" :disabled="true" placeholder="请输入上级机关" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <!-- <a-row :gutter="24" v-show="record.type !== 4">
              <a-col :span="24">
                <a-form-model-item label="管辖区域">
                  <a-select v-model="form.selectTypeArea" placeholder="请选择管辖区域">
                    <a-select-option v-for="(item, index) in selectTypeArea" :key="index" :value="item.id">
                      {{ item.departName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row> -->

            <!-- <a-row :gutter="24" v-show="record.type == 4">
              <a-col :span="22">
                <a-form-model-item label="管辖区域">
                  <a-input placeholder="请选择管辖范围" v-model="form.type4Area" />
                </a-form-model-item>
              </a-col>
              <a-col :span="2">
                <img
                  @click="showRagionalTree"
                  class="select-map-img cursor"
                  style="width: 36px; height: 36px"
                  src="@/assets/imgs/option.png"
                />
              </a-col>
            </a-row> -->

            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="机关编码" prop="policeAgencyNo">
                  <a-input v-model="form.policeAgencyNo" :maxLength="30" placeholder="请输入机关编码" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row v-if="record.type == 3" :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="身份地域码" prop="idCardRegionCode">
                  <a-input v-model="form.idCardRegionCode" :maxLength="30" placeholder="请输入身份证地域码" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="发文字号" prop="postShopName">
                  <a-input v-model="form.postShopName" placeholder="请输入机关名称" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="4">
              <a-col :span="22">
                <a-form-model-item label="经度" prop="lng">
                  <a-input v-model="form.lng" placeholder="例如104.123456" />
                </a-form-model-item>
              </a-col>
              <a-col :span="2">
                <img
                  class="select-map-img cursor"
                  src="@/assets/imgs/in-map.png"
                  style="width: 36px; height: 36px"
                  @click="showMap"
                />
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="纬度" prop="lat">
                  <a-input v-model="form.lat" placeholder="例如34.865432" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="4">
              <a-col :span="22">
                <a-form-model-item label="边界" prop="areaPosition">
                  <a-input v-model.trim="form.areaPosition" placeholder="例：lat:104.123456,lng:34.78908" />
                </a-form-model-item>
              </a-col>
              <a-col :span="2">
                <img
                  class="select-map-img cursor"
                  src="@/assets/imgs/map-area.png"
                  style="width: 36px; height: 36px"
                  @click="createBorderLine"
                />
              </a-col>
            </a-row>

            <a-row :gutter="24" class="imageUpload">
              <a-col :span="24">
                <a-form-model-item label="电子签章">
                  <a-upload
                    :customRequest="customRequest"
                    :file-list="fileList"
                    :remove="remove"
                    :showUploadList="showUploadList"
                    accept="image/png, image/JPG,image/jpeg"
                    class="avatar-uploader"
                    list-type="picture-card"
                    @change="uploadChange"
                  >
                    <div v-if="fileList.length < 1">
                      <img alt="" class="pictIcon" src="@/assets/imgs/pict-icon.png" />
                      <p class="imgText">点击上传</p>
                    </div>
                  </a-upload>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
          <div class="anty-form-btn flex justify-center">
            <a-button class="resetBtn" htmlType="button" icon="sync" type="primary" @click="emptyCurrForm">
              重置
            </a-button>
            <a-button
              v-has="'office:edit'"
              class="searchBtn"
              htmlType="button"
              icon="form"
              style="margin-left: 40px"
              type="primary"
              @click="submitCurrForm"
            >
              保存
            </a-button>
          </div>
        </a-card>
        <a-card v-else :bordered="false">
          <a-empty>
            <span slot="description"> 请先选择一个区域! </span>
          </a-empty>
        </a-card>
      </div>
    </div>
    <depart-modal ref="departModal" @ok="loadTree"></depart-modal>
    <t-map ref="tMap" :visible.sync="isShowMap" @border="getBorder" @getLatLong="getLatLong"></t-map>

    <regionalTreeModal ref="regionalTreeModal" @update="handelUpdate"></regionalTreeModal>
  </div>
</template>

<script>
import topTitle from '@/components/topTitle'
import departModal from './modules/addAreaModal'
import TMap from '@/components/t-map/index.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { comMethods } from '@/mixins/comMethods'
import { httpAction, deleteAction, getAction, postAction } from '@/api/manage'
import { getOneFlagTreeList, deleteByDepartId, uploadFile } from '@/api/api'
import regionalTreeModal from './modules/regionalTreeModal'
export default {
  name: 'district',
  mixins: [JeecgListMixin, comMethods],
  components: { topTitle, TMap, departModal, regionalTreeModal },
  data() {
    return {
      record: {},
      content: [['机关管理']],
      loading: false,
      value: '', // tree search value
      dataList: [],
      dropTrigger: '',
      selectedKeys: [],
      checkedKeys: [],
      departTree: [],
      iExpandedKeys: [],
      checkStrictly: true,
      replaceFields: {
        key: 'id',
        title: 'policeAgencyName',
      },
      autoExpandParent: true,
      disableMixinCreated: true,
      currSelected: {},
      url: {
        edit: '/sys/police_agency/edit',
        exportXlsUrl: 'sys/sysDepart/exportXls',
        importExcelUrl: '/sys/sysDepart/importExcel',
      },
      // 右边
      form: {},
      rules: {
        policeAgencyName: [{ required: true, message: '请输入机关名称!' }],
        parentPoliceAgencyName: [{ required: true, message: '请输入上级机关名称!' }],
        policeAgencyNo: [{ required: true, message: '请输入机关编码!' }],
        idCardRegionCode: [{ required: true, message: '请输入身份证地域码!' }],
        postShopName: [{ required: true, message: '请输入机关名称!' }],
        lng: [{ required: true, message: '请输入纬度!' }],
        lat: [{ required: true, message: '请输入经度!' }],
        areaPosition: [{ required: true, message: '请选择区域边界坐标!' }],
      },
      publicVisible: false,
      imageUrl: [],
      fileList: [],
      showUploadList: {
        showPreviewIcon: false,
      },
      isShowMap: false,
      imgPrefix: '',

      selectTypeArea: [],
      select_type_4_area: [],
      addList: [],
      choose_info: {},
    }
  },
  mounted() {
    this.loadTree()
  },
  methods: {
    onSearch() {
      const expanded = this.dataList
        .map((item) => {
          if (item.policeAgencyName.indexOf(this.value) > -1) {
            return this.getParentKey(item.id, this.departTree)
          }
          return null
        })
        .filter((item, i, self) => {
          if (item && self.indexOf(item) === i) {
            return item
          }
        })
      this.iExpandedKeys = expanded
      this.autoExpandParent = true
    },
    getParentKey(key, tree) {
      let parentKey
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        if (node.children) {
          if (node.children.some((item) => item.id === key)) {
            parentKey = node.id
          } else if (this.getParentKey(key, node.children)) {
            parentKey = this.getParentKey(key, node.children)
          }
        }
      }
      return parentKey
    },
    generateList(tree) {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i]
        const id = node.id
        const policeAgencyName = node.policeAgencyName
        this.dataList.push({
          id,
          policeAgencyName: policeAgencyName,
        })
        if (node.children) {
          this.generateList(node.children)
        }
      }
    },

    loadTree() {
      this.loading = true
      getOneFlagTreeList().then((res) => {
        this.treeData = []
        this.departTree = []
        if (res.code == 200) {
          this.allTreeKeys = []
          this.treeData.push(res.result[0])
          this.departTree.push(res.result[0])
          // this.setThisExpandedKeys(res.result[0])
          this.getAllKeys(res.result[0]) // * 用于右下角树操作功能
          this.generateList(this.departTree) // * 用作搜索 书中包含关键字的方法
          this.loading = false
        }
      })
    },

    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    getAllKeys(node) {
      // * 用于右下角树操作功能
      this.allTreeKeys.push(node.id)
      if (node.children && node.children.length > 0) {
        for (let a = 0; a < node.children.length; a++) {
          this.getAllKeys(node.children[a])
        }
      }
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },

    onCheck(checkedKeys, info) {
      this.imageUrl = []
      this.fileList = []
      let record = info.node.dataRef
      console.log('onCheck-record', record)
      this.currSelected = Object.assign({}, record)
      this.selectedKeys = [record.id]
      if (this.checkStrictly) {
        this.checkedKeys = checkedKeys.checked
      } else {
        this.checkedKeys = checkedKeys
      }
    },

    onSelect(selectedKeys, e) {
      this.imageUrl = []
      this.fileList = []
      let record = e.node.dataRef
      console.log('onSelect-record', record)
      this.currSelected = Object.assign({}, record)
      this.checkedKeys = [record.id] // ! 设置勾选
      this.selectedKeys = [record.id]
      this.setValuesToForm(record)
    },

    // 查询可以绑定的区域list
    async get_select_type_area(record) {
      this.selectTypeArea = []
      const { result: selectTypeArea } = await getAction('/sys/comServiceRelation/selectTypeArea', {
        type: record.type,
        parentPoliceAgencyid: record.parentId ? record.parentId : 0,
      })

      this.selectTypeArea = selectTypeArea
    },

    // 查询当前绑定的区域信息
    async get_select_area_info(record) {
      const { result } = await getAction('/sys/comServiceRelation/selectAreaInfo', {
        policeAgencyid: record.id,
      })
      return result.departId
    },

    // 查询派出所绑定的区域
    async get_select_type_4_area(record) {
      this.select_type_4_area = []
      const { result } = await getAction('/sys/comServiceRelation/selectChooseCommunity', {
        choose: 1,
        parentPoliceAgencyid: record.parentId ? record.parentId : 0,
      })
      this.select_type_4_area = result
    },

    // 查询当前派出所绑定的区域信息
    async get_select_choose_info(record) {
      const { result } = await getAction('/sys/comServiceRelation/selectChooseList', {
        policeAgencyid: record.id,
      })
      this.choose_info = result
    },

    async get_parent_info(record) {
      const { result } = await getAction('/sys/police_agency/find_parent_info', {
        id: record.id,
      })
      return result.name
    },

    // 触发onSelect事件时,为区域树右侧的form表单赋值
    async setValuesToForm(record) {
      this.form = {}
      this.record = record

      let selectTypeArea

      try {
        if (record.type !== 4) {
          // 查询可以绑定的区域list
          // await this.get_select_type_area(record)
          // 查询当前绑定的区域id
          // selectTypeArea = await this.get_select_area_info(record)
        } else {
          // // TODO 查询 街道绑定
          // await this.get_select_type_4_area(record)
          // await this.get_select_choose_info(record)
          // this.$forceUpdate()
        }
      } catch (error) {
        console.log('error', error)
      }

      // 查询父节点id名称
      let parentPoliceAgencyName = await this.get_parent_info(record)

      if (record.electronicSignature) {
        let obj = {
          uid: 1,
          name: record.electronicSignature,
          status: 'done',
          url: this.imgPrefix + record.electronicSignature,
        }
        this.fileList.push(obj)
        this.imageUrl.push(record.electronicSignature)
      }

      this.form = { ...record, selectTypeArea, parentPoliceAgencyName, type4Area: this.choose_info.name }
      // this.$nextTick(() => {
      //   this.form.setFieldsValue({ ...record })
      // })
    },

    getNodeById(list, id) {
      if (id == '' || id == null) return { policeAgencyName: '暂无' }
      for (const item of list) {
        if (item.id === id) return item
        if (item.children) {
          const res = this.getNodeById(item.children, id)
          if (res) return res
        }
      }
    },

    // 右键点击下拉框改变事件
    dropStatus(visible) {
      if (visible == false) {
        this.dropTrigger = ''
      }
    },

    rightHandle(node) {
      // ! 右键操作方法
      console.log(node.node, 'rightHandle')
      this.dropTrigger = 'contextmenu'
      this.rightClickSelectedKey = node.node.eventKey
      this.rightClickSelectedType = node.node.dataRef.type
      this.rightClickSelectedPoliceAgencyName = node.node.dataRef.policeAgencyName
    },

    closeDrop() {
      // ! 右键店家下拉关闭下拉框
      this.dropTrigger = ''
    },

    handleAdd(num) {
      if (this.getNodeById(this.treeData, this.selectedKeys[0] || this.rightClickSelectedKey).type == 4) {
        this.$message.error('已经是最子集了,不支持再添加')
        return
      }
      if (num == 2) {
        this.$refs.departModal.add({
          key: this.rightClickSelectedKey,
          type: this.rightClickSelectedType,
          parentPoliceAgencyName: this.rightClickSelectedPoliceAgencyName,
        })
      } else {
        let key = this.currSelected.id
        let type = this.currSelected.type
        let parentPoliceAgencyName = this.currSelected.policeAgencyName
        if (!key) {
          this.$message.warning('请先点击选中上级区域！')
          return false
        }
        this.$refs.departModal.add({ key, type, parentPoliceAgencyName })
      }
    },

    handleDelete() {
      this.$confirm({
        title: '确认删除',
        content: '确定要删除此区域以及子节点数据吗?',
        onOk: () => {
          deleteByDepartId({ id: this.rightClickSelectedKey }).then((resp) => {
            if (resp.code == 200) {
              //删除成功后，去除已选中中的数据
              this.emptyCurrForm()
              this.imageUrl = []
              this.fileList = []
              this.checkedKeys.splice(
                this.checkedKeys.findIndex((key) => key === this.rightClickSelectedKey),
                1
              )
              this.$message.success('删除成功!')
              this.loadTree()
              //删除后同步清空右侧基本信息内容
              let orgCode = this.form.getFieldValue('orgCode')
              if (orgCode && orgCode === this.rightClickSelectedOrgCode) {
                this.onClearSelected()
              }
            } else {
              this.$message.warning('删除失败!')
            }
          })
        },
      })
    },

    onClearSelected() {
      // ! 清空方法
      this.checkedKeys = []
      this.currSelected = {}
      this.emptyCurrForm()
      this.selectedKeys = []
    },

    // * 右下角 dropdown 功能开始
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false
      } else if (v == 2) {
        this.checkStrictly = true
      }
    },
    checkALL() {
      this.checkStriccheckStrictlytly = false
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL() {
      this.checkedKeys = []
    },
    expandAll() {
      this.iExpandedKeys = this.allTreeKeys
    },
    closeAll() {
      this.iExpandedKeys = []
    },
    // * 右下角 dropdown 功能结束

    // ! 表单上传图片方法

    remove(file) {
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.fileList.splice(index, 1)
      this.imageUrl.splice(index, 1)
    },

    async customRequest(info) {
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg，png，jpeg格式图片!')
        return
      }

      this.isLt2M = info.file.size / 1024 / 1024 < 2
      if (!this.isLt2M) {
        this.$message.warn('请上传小于200KB的照片!')
      }

      if (isJpgOrPng && this.isLt2M) {
        let file = info.file
        const formData = new FormData()
        formData.append('file', file)
        formData.append('type', 13)
        let res = await uploadFile(formData)
        if (res.code == 200) {
          this.imageUrl.push(res.result.halfPath)
        }
      }
    },
    uploadChange({ file, fileList }) {
      if (this.isLt2M) {
        file.status = 'done'
        this.fileList = fileList
      }
    },

    // ! 地图方法开始
    showMap() {
      this.isShowMap = true
    },
    getLatLong(value) {
      this.form.lng = value[0]
      this.form.lat = value[1]
    },
    getBorder(value) {
      this.form.areaPosition = value
    },
    createBorderLine() {
      this.$refs.tMap.borderLine = true
      this.isShowMap = true
    },
    // ! 地图方法结束

    showRagionalTree() {
      // if (this.select_type_4_area.length == 0) {
      //   this.$message.error('未查询到所管理的辖区!')
      //   return
      // }
      this.$refs.regionalTreeModal.show(this.select_type_4_area, this.choose_info.idSet)
    },

    // ! 处理派出所级别的树组件返回值
    handelUpdate(e, f) {
      this.addList = e
      this.form.type4Area = f
      this.$forceUpdate()
    },

    // ! 右侧表单的事件
    emptyCurrForm() {
      this.policeAgencyName = ''
      this.parentPoliceAgencyName = ''
      this.policeAgencyNo = ''
      this.idCardRegionCode = ''
      this.postShopName = ''
      this.lng = ''
      this.lat = ''
      this.areaPosition = ''
      this.imageUrl = []
      this.fileList = []
      // this.form.resetFields()
      // this.selectedKeys = []
    },

    async submitCurrForm() {
      // if (this.record.type !== 4) {
      //   if (!this.form.selectTypeArea) {
      //     this.$message.error('请选择管辖区域!')
      //     return
      //   }

      //   await postAction('/sys/comServiceRelation/addSysAgencyDepart', {
      //     policeAgencyid: this.record.id,
      //     departId: this.form.selectTypeArea,
      //     departLevel: this.record.type,
      //   })
      // } else {
      //   // if (this.addList.length == 0) {
      //   //   this.$message.error('请为派出所选择管理辖区!')
      //   //   return
      //   // }
      //   await postAction('/sys/comServiceRelation/addSysAgencyXzjdSqjwh', {
      //     policeAgencyId: this.record.id,
      //     addList: this.addList,
      //   })
      // }
      this.$refs.form.validate((valid) => {
        if (!valid) return
        if (!this.currSelected.id) {
          this.$message.warning('请点击选择要修改区域!')
          return
        }
        const values = { ...this.form }
        values.id = this.currSelected.id
        values.electronicSignature = this.imageUrl[0] || ''
        httpAction(this.url.edit, values, 'POST').then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功!')
            this.loadTree()
            // this.setValuesToForm(this.record)
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
  },
  destroy() {},
}
</script>

<style lang="less" scoped>
/deep/ .ant-card {
  background: var(--theme-container-bg);
  color: #1163b8;
}

.imageUpload {
  margin-bottom: 80px;
  /deep/.avatar-uploader {
    > .ant-upload {
      width: 120px;
      height: 120px;
      background: var(--theme-container-bg);
      border: 1px solid var(--theme-input-border);
    }
  }

  /deep/.ant-upload-select-picture-card {
    width: 120px;
    height: 120px;
  }

  /deep/ .ant-upload-list-item {
    width: 120px;
    height: 120px;
  }

  .imgText {
    color: #1163b8;
    font-weight: 500;
  }

  .pictIcon {
    margin-bottom: 10px;
    width: 42px;
    height: 38px;
  }
}

.app-container {
  background: var(--theme-content-bg);
  padding-top: 0;

  .left-tree {
    position: relative;
    background: var(--theme-container-bg);

    .btn-group {
      padding: 0.2rem 0 0 0.2rem;
      .btn-common {
        width: 1.2rem;
        height: 0.4rem;
        line-height: 0.4rem;
        text-align: center;
        background: #1388ff;
        border-radius: 0.04rem;
        font-size: 0.16rem;
        font-weight: bold;
        color: #0b3f73;
        cursor: pointer;
        &:nth-child(2) {
          margin-left: 0.2rem;
        }
      }
    }

    .drawer-bootom-button {
      position: absolute;
      right: 0.1rem;
      bottom: 0.1rem;
      border-radius: 0.04rem;
    }
  }

  .right-form {
    background: var(--theme-container-bg);
    margin-left: 0.2rem;

    .right-form-wrapper {
      height: 7.8rem;
      overflow-y: auto;
    }
  }
}

.bg-w {
  background: #fff;
}
</style>
